<!-- 库标签 -->
<template>
	<div class="library_tag_wrapper">
		<div class="library_tag_type">
			<el-input class="input" size="small" placeholder="请输入库标签名称" v-model="filterText"></el-input>
			<div class="handle">
				<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleLibraryTypeForm()">新建</el-button>
				<span>共有 {{ libraryTotal }} 个库标签</span>
			</div>
			<template v-if=""></template>
			<el-radio-group class="tagtype" v-model="checkedTagType">
				<el-radio v-for="(item, index) in libraryTypeData" :key="index" :label="item.id">
					<h4>{{ item.name }}({{ item.dirCount }})</h4>
					<el-button size="small" type="text" @click.stop="handleLibraryTypeForm(item)">修改</el-button>
					<el-button size="small" type="text" @click.stop="handleDelLibraryType(item)">删除</el-button>
				</el-radio>
			</el-radio-group>
		</div>
		<div class="library_tag_table" v-loading="loading">
			<div class="sw_table_container">
				<el-table size="medium" :data="libraryListData" stripe height="100%">
					<el-table-column prop="name" label="库名称"></el-table-column>
					<el-table-column prop="createName" label="拥有者"></el-table-column>
					<el-table-column label="操作" width="80">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" @click="handleRemoveLibrary(row.id)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getLibraryListData"></sw-pagination>
		</div>
		<library-type-form v-model="libTypeDialog" :data="formData" @refresh="getLibrayTypeData"></library-type-form>
	</div>
</template>

<script>
import libraryTypeForm from './form';
import { getLibraryList, updateLibrary } from '@/api/data/tbNetDiskDir.js';
import { getLibraryTypeList, deleteLibraryType } from '@/api/platform/tbNetLibrary.js';
export default {
	components: { libraryTypeForm },
	data() {
		return {
			loading: false,
			//资源库类型
			filterText: '',
			checkedTagType: '',
			libraryTypeList: [],
			//资源库
			queryData: { page: 1, limit: 15, type: '1', isAll: 1 },
			dataCount: 0,
			libraryListData: [],
			//表单
			libTypeDialog: false,
			formData: {}
		};
	},
	computed: {
		libraryTypeData() {
			let datas = this.$lodash.cloneDeep(this.libraryTypeList);
			return datas.filter((item) => item.name.indexOf(this.filterText) !== -1);
		},
		libraryTotal() {
			let total = 0;
			this.libraryTypeList.forEach((item) => {
				total += Number(item.dirCount);
			});
			return total;
		}
	},
	watch: {
		checkedTagType(val) {
			this.loading = true;
			this.queryData.page = 1;
			this.getLibraryListData(val);
		}
	},
	mounted() {
		this.getLibrayTypeData();
	},
	methods: {
		//获取资源库类型列表
		async getLibrayTypeData() {
			let result = await getLibraryTypeList().then((res) => res.data);
			if (result.code === '0') {
				this.libraryTypeList = !result.data ? [] : result.data;
				if (this.libraryTypeList.length > 0) {
					this.checkedTagType = this.libraryTypeList[0].id;
				}
			}
		},

		//打开资源库类型表单
		handleLibraryTypeForm(data) {
			this.formData = !data ? {} : { ...data };
			this.libTypeDialog = true;
		},

		//删除资源库类型
		handleDelLibraryType(data) {
			let that = this;
			that.$confirm(`此操作将删除资源库类型<font color="#f00">【${data.name}】</font>, 是否继续?`, '删除提示', {
				type: 'warning',
				dangerouslyUseHTMLString: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteLibraryTypeRequest(data.id);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除资源库类型请求
		async deleteLibraryTypeRequest(id) {
			let result = await deleteLibraryType(id).then((res) => res.data);
			if (result.code === '0') {
				let index = this.libraryTypeList.findIndex((item) => item.id === id);
				this.$message.success('删除资源库类型成功');
				this.libraryTypeList.splice(index, 1);
				this.filterText = '';
			} else {
				this.$message.error('删除资源库类型失败');
			}
		},

		//查询资源库数据
		async getLibraryListData(id) {
			let params = { ...this.queryData, libraryId: id };
			let result = await getLibraryList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.libraryListData = !result.data ? [] : result.data;
			}
		},

		//移除资源库
		async handleRemoveLibrary(id) {
			let params = { id, libraryList: [{ relId: this.checkedTagType, operType: 2 }] };
			let result = await updateLibrary(params).then((res) => res.data);
			if (result.code === '0') {
				this.loading = true;
				this.getLibraryListData();
				this.$message.success('移除资源库成功');
			} else {
				this.$message.error('移除资源库成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_tag_wrapper {
	flex: 1;
	display: flex;
	overflow: hidden;
}
.library_tag_type::v-deep {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 30%;
	min-width: 240px;
	padding: 16px;
	box-sizing: border-box;
	border-right: solid 1px #e4e7ed;
	.handle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		margin-top: 10px;
	}
	.tagtype {
		flex: 1;
		overflow: auto;
		margin-top: 10px;
	}
	.el-radio {
		display: block;
		margin: 0;
		padding: 0 10px;
		border-radius: 4px;
		&.is-checked {
			background-color: var(--primary-background-disabled);
		}
		h4 {
			flex: 1;
			font-weight: normal;
		}
	}
	.el-radio__input {
		display: none;
	}
	.el-radio__label {
		display: flex;
		align-items: center;
		padding: 0;
		color: #303133;
	}
}
.library_tag_table {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px;
	overflow: hidden;
	.el-table {
		width: 100%;
		margin: 0;
	}
}
</style>
